//面向对象
class Enlarge
{
    constructor(el){
        //保存最大盒模型
        this.el = document.querySelector(el)
        console.log(this) 
        //从当前盒模型中获取左侧图片框
        this.imgObj = this.el.querySelector('.img')
        //从当前盒模型中获取遮罩框
        this.maskObj = this.el.querySelector('.mask')
        //从当前盒模型中获取右侧放大镜
        this.enlargeObj = this.el.querySelector('.enlarge')
        //获取当前盒模型里所有的li标签
        this.liObjs = this.el.querySelectorAll('.box ul li')
        console.log(this.liObjs)
        //获取右侧背景图的backgroung-size属性，分割为数组
        this.enlargeBgSize =(this.getStyle(this.enlargeObj,'background-size')).split(' ')

        //调用
        this.init()
        
    }
    init(){
        //鼠标移入
        this.mouseOver()
        //鼠标移动
        this.mouseMove()
        //切换图片
        this.changImg()
        //鼠标移出
        this.mouseOut()
        
    }

    //鼠标移入事件
    mouseOver(){
        //给左侧图片框绑定鼠标移入事件
        this.imgObj.onmouseover = ()=>{ //this->事件源
            //显示遮罩框
            this.maskObj.style.display = 'block'
            //显示放大镜
            this.enlargeObj.style.display = 'block'
        }
    }


    getStyle(tagObj, attrName) 
    {
        if (window.getComputedStyle)
        {
            // return window.getComputedStyle(tagObj).attrName
            return window.getComputedStyle(tagObj)[attrName]
        } else {
            // return tagObj.currentStyle.attrName
            return tagObj.currentStyle[attrNamea]  // 当对象的键是变量时，使用数组语法
        }
    }

    //鼠标移动事件
    mouseMove(){
        //给左侧图片框绑定鼠标移动事件
        this.imgObj.onmousemove = (evt)=>{
            let e = evt || window.event
            //获取鼠标的位置
            let left = e.pageX - this.el.offsetLeft - this.maskObj.offsetWidth/2
            let top = e.pageY - this.el.offsetTop - this.maskObj.offsetHeight/2
            console.log('left:',left,'top:',top)
            console.log('e.pageX:',e.pageX,'e.pageY:',e.pageY)
            //获取遮罩框在左侧图片框中最大活动范围
            let maxLeft = this.imgObj.clientWidth - this.maskObj.offsetWidth
            let maxTop = this.imgObj.clientHeight - this.maskObj.offsetHeight
            //console.log('maxLeft:',maxLeft,'maxTop:',maxTop)
            //限制活动范围
            if(left<0) left=0
            if(top<0) top=0
            if(left>maxLeft) left = maxLeft
            if(top>maxTop)  top = maxTop
            //同步遮罩框
            this.maskObj.style.left = left + 'px'
            this.maskObj.style.top = top + 'px'
            console.log('left2:',left,'top2:',top)
            //同步右侧背景图
            this.tongbuEnlarge(left,top)
        }

    }
    //同步右侧背景图片
    tongbuEnlarge(left,top){
        //右侧背景图需要移动的距离 = 遮罩框到盒模型的距离 * （右侧背景图大小/左侧图片大小）
        //获取右侧背景图的宽高
        //获取右侧背景图的backgroung-size属性，分割为数组
        //let enlargeBgSize =(this.getStyle(this.enlargeObj,'background-size')).split(' ')
        console.log('右侧背景图的backgroung-size属性',this.enlargeBgSize) //["800px","800px"]
        //将数组中的值转换为数值型
        let enlargeWidth = parseInt(this.enlargeBgSize[0])
        let enlargeHeight = parseInt(this.enlargeBgSize[1])
        //获取左侧图片的宽高
        let imgWidth = parseInt(this.getStyle(this.imgObj,'width'))
        let imgHeight = parseInt(this.getStyle(this.imgObj,'height'))
        console.log('左侧图片的宽高',imgWidth,imgHeight)
        //右侧背景图需要移动的距离
        let x = left * (enlargeWidth/imgWidth)
        let y = top * (enlargeHeight/imgHeight)
        console.log("右侧背景图需要移动的距离:",x,y)
        this.enlargeObj.style.backgroundPosition = `-${x}px -${y}px`

    }

    //切换图片
    changImg(){
        console.log(this.liObjs)
        //遍历所有li标签
        this.liObjs.forEach((liObj,index) => {
            //给每个li标签绑定点击事件
            liObj.addEventListener('click', ()=>{
                
                //清除li标签上的class
                this.liObjs.forEach((item) => {
                    item.removeAttribute('class')
                })
                //给当前li标签加class
                liObj.setAttribute('class', 'active')
                //console.log(liObj.setAttribute('class', 'active'))

                this.imgObj.style.background = `url(./imgs/${index+1}.jpg) no-repeat`
                this.enlargeObj.style.background = `url(./imgs/${index+1}.big.jpg) no-repeat`
            })
        })
            //给每个li标签绑定点击事件
            // item.onclick = () => {
            //     //清除li标签之前的class
            //     this.el.querySelector('ul li.active').className = ''
            //     //给当前所点击的li标签加class
            //     liObjs[i].className = 'active'
            //     //改变左侧图片框中的图片地址
            //     this.imgObj.style.background = `url(./imgs/${i+1}.jpg) no-repeat`
            //     //改变右侧背景图图片地址
            //     this.el.querySelector('.enlarge').style.background = `url(./imgs/${i+1}.big.jpg) no-repeat`
            //     this.mouseMove()
            // }
           
    }

    //鼠标移出事件
    mouseOut(){
        //给左侧图片框绑定鼠标移出事件
        this.imgObj.onmouseout = ()=>{ //this->事件源
            //隐藏遮罩框
            this.maskObj.style.display = 'none'
            //隐藏放大镜
            this.enlargeObj.style.display = 'none'
        }
    }
}